{extend name="user/index" /}

{block name="title"}
<title>[ User Create ]</title>
{/block}

{block name="css"}
{css href="_CSS_user.css"}
{/block}

{block name="main"}
<div class="container mt50 text-info">
    <h1 class="text-center text-info" style="font-size: 30px">新增学员 | Create Student Information</h1>

    <form action="{:url('index/user/save')}" method="post" name="addForm" class="form-horizontal mt20" onsubmit="return checkForm()">

        <div class="form-group">
            <div class="col-md-6 col-md-offset-3">
                <select name="uclass" class="form-control input-lg">
                    {foreach $class as $val}
                    <option value="{$val['class_name']}">
                        {$val['class_name']}
                    </option>
                    {/foreach}
                </select>
                <p class="help-block text-danger">* 必填项. 选择学员现在所在的班期</p>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-6 col-md-offset-3">
                <div class="btn-group">
                    <label class="btn btn-lg btn-info changeBtn">
                        <input type="radio" name="usex" value="0"> 美女
                    </label>
                    <label class="btn btn-lg btn-danger changeBtn">
                        <input type="radio" name="usex" value="1" checked> 帅哥
                    </label>
                </div>

                <div class="btn-group">
                    <label class="btn btn-lg btn-info changeBtn">
                        <input type="radio" name="ustatus" value="0"> 已离校
                    </label>
                    <label class="btn btn-lg btn-danger changeBtn">
                        <input type="radio" name="ustatus" value="1" checked> 在校学习
                    </label>
                </div>
            </div>
        </div>

        <div class="form-group ">
            <div class="col-md-6 col-md-offset-3">
                <input type="text" class="form-control input-lg" name="uname" onblur="checkName()"
                       placeholder="输入学员的姓名">
                <p class="help-block text-danger">* 必填项.  重名学员 会新增失败！需要在名字后面加 'xx_班期'，例如： 老王_s07 </p>
            </div>
            <span id="uname" class="label hidden">未验证</span>
        </div>


        <div class="form-group ">
            <div class="col-md-6 col-md-offset-3">
                <input type="text" class="form-control input-lg" name="utel" onblur="checkTel()" maxlength="11"
                       placeholder="输入手机号">
                <p class="help-block text-danger">* 必填项.  请检查输入的是正确的手机号，方便我们联系到你</p>
            </div>
            <span id="utel" class="label hidden">未验证</span>
        </div>

        <div class="form-group">
            <div class="col-md-6 col-md-offset-3">
                <input type="text" class="form-control input-lg" name="uinfo" placeholder="输入你的座右铭 或 激励自己的话">
                <p class="help-block text-danger">人生需要信仰，否则过得和咸鱼有什么区别！</p>

            </div>
        </div>

        <div class="form-group">
            <div class="col-md-6 col-md-offset-3">
                <input type="text" class="form-control input-lg" name="umarks" placeholder="学员的备注信息">
                <p class="help-block text-danger">需要特殊备注,请写在此处</p>

            </div>
        </div>

        <div class="row mt30">
            <div class="form-group">
                <div class="col-md-offset-3 col-md-6">
                    <button type="submit" class="btn btn-lg btn-default">点我提交</button>
                    <button type="reset" class="btn btn-lg btn-danger pull-right">清空重填</button>
                </div>
            </div>
        </div>
    </form>
</div>
{/block}

{block name="js"}
<script>
    var status1 = 0;
    var status2 = 0;
    function checkName() {
        let obj = $('#uname');
        let name = document.addForm.uname.value;
        let reg = /\s/g;
        if (reg.test(name) || name == '') {
            obj.removeClass('hidden label-success label-danger')
                .addClass('label-danger');
            obj.html('姓名不得含有空白字符！');
            status1 = 0;
            return false;
        } else {
            $.ajax({
                method: 'get',
                url: '/user/getname',
                data: {'name': name},
                dataType: 'json',
                success: function (data) {
                    if (data.code === 200) {
                        obj.removeClass('hidden label-success label-danger')
                            .addClass('label-success');
                        obj.html(data.msg);
                        status1 = 1;
                        return true;
                    } else {
                        obj.removeClass('hidden label-success label-danger')
                            .addClass('label-danger');
                        obj.html(data.msg);
                        status1 = 0;
                        return false;
                    }
                }
            });
        }
    }

    function checkTel() {
        let obj = $('#utel');
        let tel = document.addForm.utel.value;
        if (tel.length !== 11) {
            obj.removeClass('hidden label-success label-danger')
                .addClass('label-danger');
            obj.html('手机号位数不够!');
            status2 = 0;
            return false;
        }
        let reg = /1[3456789]\d{9}/;
        if (!reg.test(tel)) {
            obj.removeClass('hidden label-success label-danger')
                .addClass('label-danger');
            obj.html('手机号格式有误！');
            status2 = 0;
            return false;
        }
        obj.removeClass('hidden label-success label-danger')
            .addClass('label-success');
        obj.html('格式正确！');
        status2 = 1;
        return true;
    }


    $('.changeBtn input').on('click', function () {
        $(this).parents('label')
            .removeClass('btn-info').addClass('btn-danger');
        $(this).parents('label').siblings('label')
            .removeClass('btn-danger').addClass('btn-info');
    });

    function checkForm() {
        checkName();
        checkTel();

        if (status1 === 0 || status2 === 0) {
            return false;
        }
        return true;
    }
</script>
{/block}
